<template>
  <el-row :class="tabType + '_conbox'">
    <el-col :span="qualityCheck ? 24 : 16">
      <div class="chat_msg_box">
        <div v-if="!qualityCheck" class="chat_head">
          <el-row>
            <el-col :span="24">
              <div class="chat_top">
                <div class="chat_top_head clearBoth">
                   <!--<customer-avatar-->
                  <!--class="avatar client_msg"-->
                  <!--:status="'status0'"-->
                  <!--&gt;</customer-avatar>-->
                  <div class="title">
                    <div class="chat_title" :title="chatInformation.sName + chatMethod + chatInformation.createTime">
                      {{chatInformation.sName}}
                      <span class="chat_title_type">{{chatMethod}}</span>
                      <span class="chat_title_time">{{chatInformation.createTime}}</span></div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="chat_msg_con">
          <el-row>
            <el-col :span="24">
              <div class="chatMsgCon">
                <div class="chat_msg chat_msg1 font14" ref="chatMsgs" v-on:scroll="qualityScore ? getChatHistory($event) : getChatHistoryScroll($event)">
                  <div class="msg_inner msg_inner1">
                    <div class="history_liading" v-show="!loadFlag">
                      <div class="history_liading_text">
                        <img src="./img/loading.gif" alt=""><span>{{$t('webchat.loading')}}</span>
                      </div>
                    </div>
                    <!--获取当前会话-->
                    <div class="chatUserMsg">
                      <div v-for="chatMsg in contectHistoryList" v-if="chatMsg.contentType !== 'csr'" :key="chatMsg._id" class="msg_li clearBoth" :class="chatMsg.type === 'system' || chatMsg.type == 'imcsr' ? 'system_li' : ''">
                        <!-- type为in的消息 -->
                        <div class="chat_item in clearBoth" v-if="chatMsg.type === 'in' || (chatMsg.type === '' && chatMsg.platform === 'weixin') || (chatMsg.type === '' && chatMsg.platform === 'weibo')">
                          <div v-if="chatMsg.contentType === 'text'" class="chat_text_con">
                            <div class="chat_user_info">
                              <customer-avatar
                                class="client_msg"
                                :size="16"
                                :status="displayName.row.status"
                              ></customer-avatar>
                              <div class="chat_time">{{chatTime(chatMsg)}}</div>
                            </div>
                            <div class="chat_content do_search" :style="(chatMsg.isExistFocusWords && chatMsg.type === 'in')?'background-color:#'+ chatMsg.backgroundColor:''">
                              <div class="chat_content_arrow"  :style="(chatMsg.isExistFocusWords&&chatMsg.type === 'in')?'border: 5px solid #'+ chatMsg.backgroundColor+';border-color: #'+chatMsg.backgroundColor+' transparent transparent #'+ chatMsg.backgroundColor+'; :'+ '':''"></div>
                              <div class="chat_message_con">
                                <div class="chat_message_con_text" v-html="chatMsg.message"></div>
                              </div>
                              <span class="img_action_kmsearch iconfont icon-sousuo" @click.stop="openPopSearch(true,$event)"></span>
                            </div>
                          </div>
                          <div v-if="chatMsg.contentType === 'image'">
                            <div class="chat_user_info">
                              <customer-avatar
                                class="client_msg"
                                :size="16"
                                :status="displayName.row.status"
                              ></customer-avatar>
                              <div class="chat_time">{{chatTime(chatMsg)}}</div>
                            </div>
                            <div class="chat_content image">
                              <div class="chat_content_arrow"></div>
                              <video v-if="fileType.includes((chatMsg.message.substring(chatMsg.message.lastIndexOf('.')+1)).toLowerCase())" :src="common.addCosDown(chatMsg.message, true)" width="230px" height="100%" controls></video>
                              <img class="chat_img" 
                              v-else
                              :src="common.quickUrlDeal(chatMsg.message)" @click.stop="showBigImage(common.quickUrlDeal(chatMsg.message))"/>
                            </div>
                          </div>
                          <div v-if="chatMsg.contentType === 'file' && !chatMsg.mp3Suffix">
                            <div class="chat_user_info">
                              <customer-avatar
                                class="client_msg"
                                :size="16"
                                :status="displayName.row.status"
                              ></customer-avatar>
                              <div class="chat_time">{{chatTime(chatMsg)}}</div>
                            </div>
                            <div class="chat_content do_search" >
                              <div class="chat_content_arrow"></div>
                              <!-- 文件的url路径未知 -->
                              <!-- <a :href="chatMsg.message" target="_blank">{{chatMsg.fileName}}</a> -->
                              <video v-if="fileType.includes(chatMsg.fileName ? ((chatMsg.fileName.substring(chatMsg.fileName.lastIndexOf('.')+1)).toLowerCase()) : '')" :src="common.addCosDown(chatMsg.message, true)" width="230px" height="100%" controls></video>
                              <img v-else-if="imgType.includes(chatMsg.fileName ? ((chatMsg.fileName.substring(chatMsg.fileName.lastIndexOf('.')+1)).toLowerCase()) : '')" class="chat_img" :src="common.quickUrlDeal(chatMsg.message)" @click.stop="showBigImage(common.urlDeal(common.quickUrlDeal(chatMsg.message)))"/>
                              <a v-else style="text-decoration:underline" :href="common.addCosDown(chatMsg.message, true)" target="_blank">{{chatMsg.fileName}}</a>
                              <!--<span class="img_action_kmsearch iconfont icon-sousuo" @click.stop="openPopSearch(true,$event)"></span>-->
                            </div>
                          </div>
                          <div v-if="chatMsg.contentType === 'voice' || (chatMsg.contentType === 'file' && chatMsg.mp3Suffix)">
                            <div class="chat_text_con clearBoth" >
                              <div class="chat_user_info">
                                <customer-avatar
                                  class="client_msg"
                                  :size="16"
                                  :status="displayName.row.status"
                                ></customer-avatar>
                                <div class="chat_time">{{chatTime(chatMsg)}}</div>
                              </div>
                              <div class="chat_content voice_content" @click.stop="changeVoicePlay(chatMsg, 'user')">
                                <!--<div class="voice_content_cover" @click="playVoice($event)"></div>-->
                                <div class="chat_content_arrow"></div>
                                <div class="chat_message_con">
                                  <webchat-chat-voice :chatMsg="chatMsg" :chatFlag="'user'"></webchat-chat-voice>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div v-if="chatMsg.contentType === 'video'">
                            <!--TODO：视频气泡-->
                            <div class="chat_user_info">
                              <customer-avatar
                                class="client_msg"
                                :status="displayName.row.status"
                                :size="16"
                              ></customer-avatar>
                              <div class="chat_time">{{chatTime(chatMsg)}}</div>
                            </div>
                            <div class="chat_content">
                              <div class="chat_content_arrow"></div>
                              <div class="chat_message_con" :class="{colorred:chatMsg.videoStatus === 'cancel' || chatMsg.videoStatus === 'refuse' || !chatMsg.videoStatus}">
                                <i class="iconfont icon-shipin cursorPointer" :class="{colorred:chatMsg.videoStatus === 'cancel' || chatMsg.videoStatus === 'refuse' || !chatMsg.videoStatus}"></i>
                                <span>{{VideoDesc(chatMsg.videoStatus)}}</span>
                                <span v-if="chatMsg.videoStatus === 'Hangup' || chatMsg.videoStatus === 'hangup'">{{videoTimeCom(chatMsg.message)}}</span>
                              </div>
                            </div>
                          </div>
                          <!-- 屏幕分享 -->
                          <div v-if="chatMsg.contentType === 'screenShare'">
                            <div class="chat_user_info">
                              <customer-avatar
                                class="client_msg"
                                :status="displayName.row.status"
                                :size="16"
                              ></customer-avatar>
                              <div class="chat_time">{{chatTime(chatMsg)}}</div>
                            </div>
                            <div class="chat_content">
                              <div class="chat_content_arrow"></div>
                              <div class="chat_message_con" :class="{colorred:chatMsg.screenShareStatus === 'agentCancel' || chatMsg.screenShareStatus === 'custRefuse' || !chatMsg.screenShareStatus}">
                                <i class="iconfont icon-zhuomianfenxiang cursorpointer" :class="{colorred:chatMsg.screenShareStatus === 'agentCancel' || chatMsg.screenShareStatus === 'custRefuse' || !chatMsg.screenShareStatus}"></i>
                                <span>{{screenShareDesc(chatMsg.screenShareStatus)}}</span>
                                <span v-if="chatMsg.screenShareStatus === 'agentFinish'">{{videoTimeCom(chatMsg.duration)}}</span>
                              </div>
                            </div>
                          </div>
                          <div v-if="chatMsg.contentType === 'wechatvideo'">
                            <div class="chat_user_info">
                              <customer-avatar
                                class="client_msg"
                                :status="displayName.row.status"
                                :size="16"
                              ></customer-avatar>
                              <div class="chat_time">{{chatTime(chatMsg)}}</div>
                            </div>
                            <div class="chat_content">
                              <div class="chat_content_arrow"></div>
                              <div class="chat_message_con wechat_video">
                                <a :href="chatMsg.message" target="_blank">
                                  <div class="wechat_video_play_icon">
                                    <div class="play_icon"></div>
                                  </div>
                                  <img v-if="chatMsg.thunmbnail" class="wecbat_video_thunmbnail" :src="chatMsg.thunmbnail">
                                  <div v-else class="wecbat_video_thunmbnail_no">
                                    <div class="thunmbnail_no_icom"></div>
                                  </div>
                                </a>
                              </div>
                            </div>
                          </div>
                          <div v-if="chatMsg.contentType === 'newCardInfo'">
                            <div class="chat_user_info">
                              <customer-avatar
                                class="client_msg"
                                :status="displayName.row.status"
                                :size="16"
                              ></customer-avatar>
                              <div class="chat_time">{{chatTime(chatMsg)}}</div>
                            </div>
                            <div class="chat_content chat_msg_newCardInfo">
                              <div>
                                <div :class="chatMsg.type === 'out' ? 'chat_cardInfo_arrow_out' : 'chat_cardInfo_arrow'"></div>
                                <div class="chat_msg_newCardInfo_top">
                                  <img :src="chatMsg.newCardInfo && chatMsg.newCardInfo.img" alt="">
                                  <div class="newCardInfo_top_right">
                                    <div class="newCardInfoTitle">{{chatMsg.newCardInfo.title}}</div>
                                    <div class="newCardInfoSecond">
                                      <p :class="{newCardInfoSubTitle: chatMsg.newCardInfo.price || chatMsg.newCardInfo.attr_two, newCardInfoSubTitleTwo: !(chatMsg.newCardInfo.price || chatMsg.newCardInfo.attr_two)}"
                                         v-show="chatMsg.newCardInfo.sub_title" :style="{width: chatMsg.newCardInfo.attr_one ? '160px' : '210px', float: 'left'}">
                                        {{chatMsg.newCardInfo.sub_title}}
                                      </p>
                                      <p class="newCardInfoAttrOne" :style="{color: chatMsg.newCardInfo.attr_one && chatMsg.newCardInfo.attr_one.color || '#878787'}" v-if="chatMsg.newCardInfo.attr_one">{{chatMsg.newCardInfo.attr_one.content}}</p>
                                    </div>
                                    <div>
                                      <p v-show="chatMsg.newCardInfo.price" class="newCardInfoPrice">{{chatMsg.newCardInfo.price}}</p>
                                      <p class= "newCardInfoAttrTwo" :style="{color: chatMsg.newCardInfo.attr_two && chatMsg.newCardInfo.attr_two.color || '#FF8403'}" v-if="chatMsg.newCardInfo.attr_two">{{chatMsg.newCardInfo.attr_two.content}}</p>
                                    </div>
                                  </div>
                                </div>
                                <div class="newCardInfoDecs">
                                  <p v-show="chatMsg.newCardInfo.other_title_one">{{chatMsg.newCardInfo.other_title_one}}</p>
                                  <p v-show="chatMsg.newCardInfo.other_title_two">{{chatMsg.newCardInfo.other_title_two}}</p>
                                  <p v-show="chatMsg.newCardInfo.other_title_three">{{chatMsg.newCardInfo.other_title_three}}</p>
                                </div>
                              </div>
                              <div v-if="chatMsg.newCardInfo.tags && chatMsg.newCardInfo.tags.length > 0" class="newCardInfoBtn">
                                <ul>
                                  <li v-for="(item, index) in chatMsg.newCardInfo.tags" :key="index"><el-button size="mini" :type="index === 0 ? 'primary' : ''" >{{item.label}}</el-button></li>
                                </ul>
                              </div>
                            </div>
                          </div>
                          <!-- 机器人发起表单 -->
                          <div v-if="chatMsg.contentType === 'xbotFormSubmit'">
                            <div class="chat_user_info">
                              <customer-avatar
                                class="client_msg"
                                :status="displayName.row.status"
                                :size="16"
                              ></customer-avatar>
                              <div class="chat_time">{{chatTime(chatMsg)}}</div>
                            </div>
                            <div class="chat_content" :style="(chatMsg.isExistFocusWords && chatMsg.type === 'in')?'background-color:#'+ chatMsg.backgroundColor:''" :class="chatMsg.type === 'in' && tabType === 'webchat_todo' ? 'do_search' : ''">
                              <div v-for="(formInfoLi, index) in chatMsg.xbotFormSubmit.formInfo" :key="index">
                                <p v-if="formInfoLi.type !== 'document'">{{formInfoLi.name}}：{{formInfoLi.value}}</p>
                                <div v-if="formInfoLi.type === 'document'">
                                  {{formInfoLi.name}}：
                                  <a v-for="(fileListLi, num) in formInfoLi.filelist" :key="num" :href="fileListLi.url" target='_blank'>{{fileListLi.name}}</a>
                                </div>
                              </div>
                            </div>
                          </div>
                          
                          <!-- xbot机器人商品信息卡片消息 -->
                          <div v-if="(chatMsg.contentType === 'msgTask' || chatMsg.msgType === 'msgTask' ) && chatMsg.newCardInfo">
                            <div class="chat_user_info">
                              <customer-avatar
                                class="client_msg"
                                :status="displayName.row.status"
                                :size="16"
                              ></customer-avatar>
                              <div class="chat_time">{{chatTime(chatMsg)}}</div>
                            </div>
                            <div class="chat_msg_newCardInfo robot_cardinfo" :style="{marginRight: chatMsg.type === 'out' ? '5px': ''}" >
                              <div @click="openGoodsInfoUrl(chatMsg)">
                                <div :class="chatMsg.type === 'out' ? 'chat_cardInfo_arrow_out' : 'chat_cardInfo_arrow'"></div>
                                <div class="chat_msg_newCardInfo_top">
                                  <img :src="chatMsg.newCardInfo && chatMsg.newCardInfo.img" alt="">
                                  <div class="newCardInfo_top_right">
                                    <div class="newCardInfoTitle clearfix">
                                      <p class="robotCardInfoCon">{{chatMsg.newCardInfo.title}}</p>
                                      <p v-show="chatMsg.newCardInfo.price" class="newCardInfoPrice">{{chatMsg.newCardInfo.price}}</p>
                                    </div>
                                    <div class="newCardInfoSecond">
                                      <p :class="{newCardInfoSubTitle: chatMsg.newCardInfo.price || chatMsg.newCardInfo.attr_two, newCardInfoSubTitleTwo: !(chatMsg.newCardInfo.price || chatMsg.newCardInfo.attr_two)}"
                                        v-show="chatMsg.newCardInfo.sub_title" :style="{width: chatMsg.newCardInfo.attr_one ? '160px' : '210px', float: 'left'}">
                                        {{chatMsg.newCardInfo.sub_title}}
                                      </p>
                                      <p class="newCardInfoAttrOne" :style="{color: chatMsg.newCardInfo.attr_one && chatMsg.newCardInfo.attr_one.color || '#878787'}" v-if="chatMsg.newCardInfo.attr_one">{{chatMsg.newCardInfo.attr_one.content}}</p>
                                    </div>
                                    <div class="robotCardInfoThird">
                                      <p class= "robotCardInfoThirdLeft" v-show="chatMsg.newCardInfo.other_title_one">{{chatMsg.newCardInfo.other_title_one}}</p>
                                      <p class= "newCardInfoAttrTwo" :style="{color: chatMsg.newCardInfo.attr_two && chatMsg.newCardInfo.attr_two.color || '#FF8403'}" v-if="chatMsg.newCardInfo.attr_two">{{chatMsg.newCardInfo.attr_two.content}}</p>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div v-if="chatMsg.newCardInfo.tags && chatMsg.newCardInfo.tags.length > 0" class="newCardInfoBtn">
                                <ul>
                                  <li v-for="(item, index) in chatMsg.newCardInfo.tags" :key="index"><el-button size="mini" :type="index === 0 ? 'primary' : ''" @click.native="jumpIframeFun(item)" v-if="item.label">{{item.label}}</el-button></li>
                                </ul>
                              </div>
                            </div> 
                          </div>

                          <!--商品信息-->
                          <div class="chat_msg_goods_info" v-if="isEcommerce && chatMsg.contentType === 'cardInfo'">
                            <div class="chat_user_info">
                              <customer-avatar
                                class="client_msg"
                                :status="displayName.row.status"
                                :size="16"
                              ></customer-avatar>
                              <div class="chat_time">{{chatTime(chatMsg)}}</div>
                            </div>
                            <div class="ecommerceCardInfo">
                              <img :src="chatMsg.cardInfo.imageUrl" alt="" class="ecommerceCardInfoImg">
                              <div class="ecommerceCardInfoRight">
                                <div class="ecommerceCardInfoTitle">{{chatMsg.cardInfo.name}}</div>
                                <div class="ecommercePrice">{{chatMsg.cardInfo.price}}</div>
                              </div>
                            </div>
                          </div>
                          <div class="chat_msg_goods_info" v-if="!isEcommerce && chatMsg.contentType === 'cardInfo'">
                            <div class="chat_user_info">
                              <customer-avatar
                                class="client_msg"
                                :status="displayName.row.status"
                                :size="16"
                              ></customer-avatar>
                              <div class="chat_time">{{chatTime(chatMsg)}}</div>
                            </div>
                            <!--<div :class="chatMsg.type === 'out' ? 'chat_content_arrow_out' : 'chat_content_arrow'"></div>-->
                            <div class="m7GoodsInfo" @click="openGoodsInfoUrl(chatMsg)">
                              <div class="goodInfoLeft" v-if="chatMsg.cardInfo.left && chatMsg.cardInfo.left.url">
                                <img :src="decodeURIComponent(chatMsg.cardInfo.left.url)">
                              </div>
                              <div class="goodInfoRight" :style="{width: chatMsg.cardInfo.left && chatMsg.cardInfo.left.url ? 'calc(100% - 70px)' : '100%'}">
                                <span class="goodInfoRight1" v-if="chatMsg.cardInfo.right1 && chatMsg.cardInfo.right1.text">{{chatMsg.cardInfo.right1.text}}</span>
                                <span class="goodInfoRight2" v-if="chatMsg.cardInfo.right2 && chatMsg.cardInfo.right2.text">{{chatMsg.cardInfo.right2.text}}</span>
                                <span class="goodInfoRight3" v-if="chatMsg.cardInfo.right3 && chatMsg.cardInfo.right3.text">{{chatMsg.cardInfo.right3.text}}</span>
                                <span class="MoreGoodsInfo" v-if="chatMsg.cardInfo.extraInfos && chatMsg.cardInfo.extraInfos.length > 0" v-html="showExtraInfoMap[chatMsg._id] ? '收起' : '更多'" @click.stop="showExtraInfo(chatMsg)"></span>
                                <span v-if="chatMsg.cardInfo.extraInfos && chatMsg.cardInfo.extraInfos.length > 0 && showExtraInfoMap[chatMsg._id]" v-for="moreInfo in chatMsg.cardInfo.extraInfos">{{moreInfo}}</span>
                              </div>
                            </div>
                          </div>
                          <div v-if="chatMsg.contentType === 'link'">
                            <div class="chat_user_info">
                              <customer-avatar
                                class="client_msg"
                                :status="displayName.row.status"
                                :size="16"
                              ></customer-avatar>
                              <div class="chat_time">{{chatTime(chatMsg)}}</div>
                            </div>
                            <div class="chat_content do_search" >
                              <div class="chat_content_arrow"></div>
                              <a class="link_title" :href="chatMsg.message" target="_blank">{{chatMsg.linkTitle}}</a>
                              <div class="link_description">{{chatMsg.linkDescription}}</div>
                            </div>
                          </div>
                        </div>
                        <!-- type为out的消息 -->
                        <div class="chat_item out clearBoth"  v-if=" chatMsg.type == 'out'">
                          <template v-if="chatMsg.contentType === 'text' || chatMsg.contentType === 'msgTask'">
                            <div class="chat_content">
                              <div class="send_status failure iconfont icon-tishi" v-if="chatMsg.sendStatus=='fail'"></div>
                              <div class="send_status process" v-if="chatMsg.sendStatus=='sending'"></div>
                              <div class="chat_content_arrow_out"></div>
                              <pre class="chat_content_text" v-html="chatMsg.message"></pre>
                            </div>
                            <div class="chat_user_info_out clearBoth">
                              <div class="chat_user_img" :class="{robot: im_icon(chatMsg) === 'robot'}">
                                <img v-if="im_icon(chatMsg) && im_icon(chatMsg) != 'robot'" :src="im_icon(chatMsg)" alt=""/>
                                <i v-if="im_icon(chatMsg) === 'robot'" class="iconfont icon-jiqirentouxiang"></i>
                              </div>
                              <div class="chat_time">{{chatTime(chatMsg)}}</div>
                            </div>
                          </template>
                          <template v-if="chatMsg.contentType === 'NewPushQues'">
                            <div class="chat_content">
                              <div class="send_status failure iconfont icon-tishi" v-if="chatMsg.sendStatus=='fail'"></div>
                              <div class="send_status process" v-if="chatMsg.sendStatus=='sending'"></div>
                              <div class="chat_content_arrow_out"></div>
                              <pre class="chat_content_text" v-html="chatMsg.message"></pre>
                            </div>
                            <div class="chat_user_info_out clearBoth">
                              <div class="chat_user_img" :class="{robot: im_icon(chatMsg) === 'robot'}">
                                <img v-if="im_icon(chatMsg) && im_icon(chatMsg) != 'robot'" :src="im_icon(chatMsg)" alt=""/>
                                <i v-if="im_icon(chatMsg) === 'robot'" class="iconfont icon-jiqirentouxiang"></i>
                              </div>
                              <div class="chat_time">{{chatTime(chatMsg)}}</div>
                            </div>
                          </template>
                          <template v-if="chatMsg.contentType === 'image'">
                            <div class="chat_content image">
                              <div class="chat_content_arrow_out"></div>
                              <img class="chat_img" :src="common.quickUrlDeal(chatMsg.message)" @click.stop="showBigImage(common.quickUrlDeal(chatMsg.message))"/>
                            </div>
                            <div class="chat_user_info_out clearBoth">
                              <div class="chat_user_img" :class="{robot: im_icon(chatMsg) === 'robot'}">
                                <img v-if="im_icon(chatMsg) && im_icon(chatMsg) != 'robot'" :src="im_icon(chatMsg)" alt=""/>
                                <i v-if="im_icon(chatMsg) === 'robot'" class="iconfont icon-jiqirentouxiang"></i>
                              </div>
                              <div class="chat_time">{{chatTime(chatMsg)}}</div>
                            </div>
                          </template>
                          <template v-if="chatMsg.contentType === 'file' && !chatMsg.mp3Suffix">
                            <div class="chat_content">
                              <div class="chat_content_arrow_out"></div>
                              <!-- 文件的url路径未知 -->
                              <!-- <a :href="common.addCosDown(chatMsg.message)" target="_blank">{{chatMsg.fileName}}</a> -->
                              <video v-if="fileType.includes(chatMsg.message.substring(chatMsg.message.lastIndexOf('.')+1))" :src="common.addCosDown(chatMsg.message, true)" width="230px" height="100%" controls></video>
                              <img v-else-if="imgType.includes(chatMsg.fileName.substring(chatMsg.fileName.lastIndexOf('.')+1))" class="chat_img" :src="common.quickUrlDeal(chatMsg.message)" @click.stop="showBigImage(common.quickUrlDeal(chatMsg.message))"/>
                              <a v-else style="text-decoration:underline" :class="chatMsg.type === 'out' ? 'chat_content_text':'chat_message_con_text'" :href="common.addCosDown(chatMsg.message, true)" target="_blank">{{chatMsg.fileName}}</a>
                            </div>
                            <div class="chat_user_info_out clearBoth">
                              <div class="chat_user_img" :class="{robot: im_icon(chatMsg) === 'robot'}">
                                <img v-if="im_icon(chatMsg) && im_icon(chatMsg) != 'robot'" :src="im_icon(chatMsg)" alt=""/>
                                <i v-if="im_icon(chatMsg) === 'robot'" class="iconfont icon-jiqirentouxiang"></i>
                              </div>
                              <div class="chat_time">{{chatTime(chatMsg)}}</div>
                            </div>
                          </template>
                          <template v-if="chatMsg.contentType === 'iframe'">
                            <div class="chat_content">
                              <div class="chat_content_arrow_out"></div>
                              <div style="max-width: 100%;max-height: 300px;overflow: auto">
                                <iframe :src="chatMsg.message" frameborder="0" :width="chatMsg.iframeWidth" :height="chatMsg.iframeHeight"></iframe>
                              </div>
                            </div>
                            <div class="chat_user_info_out clearBoth">
                              <div class="chat_user_img" :class="{robot: im_icon(chatMsg) === 'robot'}">
                                <img v-if="im_icon(chatMsg) && im_icon(chatMsg) != 'robot'" :src="im_icon(chatMsg)" alt=""/>
                                <i v-if="im_icon(chatMsg) === 'robot'" class="iconfont icon-jiqirentouxiang"></i>
                              </div>
                              <div class="chat_time">{{chatTime(chatMsg)}}</div>
                            </div>
                          </template>
                          <template v-if="chatMsg.contentType === 'video'">
                            <!--TODO：视频气泡-->
                            <div class="chat_content">
                              <div class="chat_content_arrow_out"></div>
                              <div class="chat_message_con" :class="{colorred:chatMsg.videoStatus === 'cancel' || chatMsg.videoStatus === 'refuse' || !chatMsg.videoStatus}">
                                <i class="iconfont icon-shipin cursorPointer" :class="{colorred:chatMsg.videoStatus === 'cancel' || chatMsg.videoStatus === 'refuse' || !chatMsg.videoStatus}"></i>
                                <span>{{VideoDesc(chatMsg.videoStatus)}}</span>
                                <span v-if="chatMsg.videoStatus === 'Hangup' || chatMsg.videoStatus === 'hangup'">{{videoTimeCom(chatMsg.message)}}</span>
                              </div>
                            </div>
                            <div class="chat_user_info_out clearBoth">
                              <div class="chat_user_img" :class="{robot: im_icon(chatMsg) === 'robot'}">
                                <img v-if="im_icon(chatMsg) && im_icon(chatMsg) != 'robot'" :src="im_icon(chatMsg)" alt=""/>
                                <i v-if="im_icon(chatMsg) === 'robot'" class="iconfont icon-jiqirentouxiang"></i>
                              </div>
                              <div class="chat_time">{{chatTime(chatMsg)}}</div>
                            </div>
                          </template>
                          <template v-if="chatMsg.contentType === 'screenShare'">
                            <!--屏幕共享-->
                            <div class="chat_content">
                              <div class="chat_content_arrow_out"></div>
                              <div class="chat_message_con" :class="{colorred:chatMsg.screenShareStatus === 'agentCancel' || chatMsg.screenShareStatus === 'custRefuse' || !chatMsg.screenShareStatus}">
                                <i class="iconfont icon-zhuomianfenxiang cursorpointer" :class="{colorred:chatMsg.screenShareStatus === 'agentCancel' || chatMsg.screenShareStatus === 'custRefuse' || !chatMsg.screenShareStatus}"></i>
                                <span>{{screenShareDesc(chatMsg.screenShareStatus)}}</span>
                                <span v-if="chatMsg.screenShareStatus === 'agentFinish'">{{videoTimeCom(chatMsg.duration)}}</span>
                              </div>
                            </div>
                            <div class="chat_user_info_out clearBoth">
                              <div class="chat_user_img" :class="{robot: im_icon(chatMsg) === 'robot'}">
                                <img v-if="im_icon(chatMsg) && im_icon(chatMsg) != 'robot'" :src="im_icon(chatMsg)" alt=""/>
                                <i v-if="im_icon(chatMsg) === 'robot'" class="iconfont icon-jiqirentouxiang"></i>
                              </div>
                              <div class="chat_time">{{chatTime(chatMsg)}}</div>
                            </div>
                          </template>
                          <!--商品卡片信息消息-->
                          <template v-if="chatMsg.contentType === 'newCardInfo'">
                            <div class="chat_msg_newCardInfo">
                              <div>
                                <div :class="chatMsg.type === 'out' ? 'chat_cardInfo_arrow_out' : 'chat_cardInfo_arrow'"></div>
                                <div class="chat_msg_newCardInfo_top">
                                  <img :src="chatMsg.newCardInfo && chatMsg.newCardInfo.img" alt="">
                                  <div class="newCardInfo_top_right">
                                    <div class="newCardInfoTitle">{{chatMsg.newCardInfo.title}}</div>
                                    <div class="newCardInfoSecond">
                                      <p :class="{newCardInfoSubTitle: chatMsg.newCardInfo.price || chatMsg.newCardInfo.attr_two, newCardInfoSubTitleTwo: !(chatMsg.newCardInfo.price || chatMsg.newCardInfo.attr_two)}"
                                         v-show="chatMsg.newCardInfo.sub_title" :style="{width: chatMsg.newCardInfo.attr_one ? '160px' : '210px', float: 'left'}">
                                        {{chatMsg.newCardInfo.sub_title}}
                                      </p>
                                      <p class="newCardInfoAttrOne" :style="{color: chatMsg.newCardInfo.attr_one && chatMsg.newCardInfo.attr_one.color || '#878787'}" v-if="chatMsg.newCardInfo.attr_one">{{chatMsg.newCardInfo.attr_one.content}}</p>
                                    </div>
                                    <div>
                                      <p v-show="chatMsg.newCardInfo.price" class="newCardInfoPrice">{{chatMsg.newCardInfo.price}}</p>
                                      <p class= "newCardInfoAttrTwo" :style="{color: chatMsg.newCardInfo.attr_two && chatMsg.newCardInfo.attr_two.color || '#FF8403'}" v-if="chatMsg.newCardInfo.attr_two">{{chatMsg.newCardInfo.attr_two.content}}</p>
                                    </div>
                                  </div>
                                </div>
                                <div class="newCardInfoDecs">
                                  <p v-show="chatMsg.newCardInfo.other_title_one">{{chatMsg.newCardInfo.other_title_one}}</p>
                                  <p v-show="chatMsg.newCardInfo.other_title_two">{{chatMsg.newCardInfo.other_title_two}}</p>
                                  <p v-show="chatMsg.newCardInfo.other_title_three">{{chatMsg.newCardInfo.other_title_three}}</p>
                                </div>
                              </div>
                              <div v-if="chatMsg.newCardInfo.tags && chatMsg.newCardInfo.tags.length > 0" class="newCardInfoBtn">
                                <ul>
                                  <li v-for="(item, index) in chatMsg.newCardInfo.tags" :key="index"><el-button size="mini" :type="index === 0 ? 'primary' : ''" >{{item.label}}</el-button></li>
                                </ul>
                              </div>
                            </div>
                            <div class="chat_user_info_out clearBoth">
                              <div class="chat_user_img" :class="{robot: im_icon(chatMsg) === 'robot'}">
                                <img v-if="im_icon(chatMsg) && im_icon(chatMsg) != 'robot'" :src="im_icon(chatMsg)" alt=""/>
                                <i v-if="im_icon(chatMsg) === 'robot'" class="iconfont icon-jiqirentouxiang"></i>
                              </div>
                              <div class="chat_time">{{chatTime(chatMsg)}}</div>
                            </div>
                          </template>
                          <template v-if="chatMsg.contentType === 'voice' || (chatMsg.contentType === 'file' && chatMsg.mp3Suffix)">
                            <div class="chat_content voice_content" @click.stop="changeVoicePlay(chatMsg, 'user')">
                              <!--<div class="voice_content_cover" @click="playVoice($event)"></div>-->
                              <div class="chat_content_arrow_out"></div>
                              <div class="chat_message_con">
                                <webchat-chat-voice :chatMsg="chatMsg" :chatFlag="'user'"></webchat-chat-voice>
                              </div>
                            </div>
                            <div class="chat_user_info_out clearBoth">
                              <div class="chat_user_img" :class="{robot: im_icon(chatMsg) === 'robot'}">
                                <img v-if="im_icon(chatMsg) && im_icon(chatMsg) != 'robot'" :src="im_icon(chatMsg)" alt=""/>
                                <i v-if="im_icon(chatMsg) === 'robot'" class="iconfont icon-jiqirentouxiang"></i>
                              </div>
                              <div class="chat_time">{{chatTime(chatMsg)}}</div>
                            </div>
                          </template>
                          <!--富文本链接-->
                          <template v-if="chatMsg.contentType === 'richText'">
                            <div class="chat_content">
                              <div class="chat_content_arrow_out"></div>
                              <div class="chat_msg_richText" @click.stop="openNewRichText(chatMsg.richTextUrl)">
                                <p class="richTextTitle">{{chatMsg.richTextTitle}}</p>
                                <div class="chat_msg_richText_bottom">
                                  <p class="richTextDescription" :style="{width: chatMsg.richTextPicUrl ? '140px' : ''}">{{chatMsg.richTextDescription}}</p>
                                  <img v-if="chatMsg.richTextPicUrl" :src="chatMsg.richTextPicUrl" class="richTextPicUrl">
                                </div>
                              </div>
                            </div>
                            <div class="chat_user_info_out clearBoth">
                              <div class="chat_user_img" :class="{robot: im_icon(chatMsg) === 'robot'}">
                                <img v-if="im_icon(chatMsg) && im_icon(chatMsg) != 'robot'" :src="im_icon(chatMsg)" alt=""/>
                                <i v-if="im_icon(chatMsg) === 'robot'" class="iconfont icon-jiqirentouxiang"></i>
                              </div>
                              <div class="chat_time">{{chatTime(chatMsg)}}</div>
                            </div>
                          </template>
                          <template>
                            <!-- 访客填写机器人表单 -->
                            <div v-if="chatMsg.contentType === 'xbotForm'" class="chat_content">
                              <div class="chat_content_text" v-html="chatMsg.message"></div>
                            </div>
                          </template>
                          <template>
                            <!-- 表单消息 -->
                            <div v-if="chatMsg.contentType === 'sessionForm'" class="chat_content clearBoth" :style="(chatMsg.isExistFocusWords && chatMsg.type === 'in')?'background-color:#'+ chatMsg.backgroundColor:''" :class="chatMsg.type === 'in' && tabType === 'webchat_todo' ? 'do_search' : ''">
                              <div :class="chatMsg.type === 'out' ? 'chat_content_arrow_out' : 'chat_content_arrow'" :style="(chatMsg.isExistFocusWords&&chatMsg.type === 'in')?'border: 5px solid #'+ chatMsg.backgroundColor+';border-color: #'+chatMsg.backgroundColor+' transparent transparent #'+ chatMsg.backgroundColor+'; :'+ '':''"></div>
                              <pre class="chat_content_text">{{chatMsg.message}}</pre>
                              <div v-show="chatMsg.recommend_activities" v-for="(recommendActivitiesItem, index) in chatMsg.recommend_activities" :key="index" class="recommend">
                                <a :href="recommendActivitiesItem.link">{{recommendActivitiesItem.name}}</a>
                              </div>
                            </div>
                            <div class="clearBoth"></div>
                            <div class="chat_user_info_out clearBoth">
                              <div class="chat_user_img" :class="{robot: im_icon(chatMsg) === 'robot'}">
                                <img v-if="im_icon(chatMsg) && im_icon(chatMsg) != 'robot'" :src="im_icon(chatMsg)" alt=""/>
                                <i v-if="im_icon(chatMsg) === 'robot'" class="iconfont icon-jiqirentouxiang"></i>
                              </div>
                              <div class="chat_time">{{chatTime(chatMsg)}}</div>
                            </div>
                          </template>
                          <!-- 微信小程序消息发送失败 -->
                          <el-tooltip :content="wechatErrorCode(chatMsg.wxminires)" placement="left">
                            <div v-if="chatMsg.type === 'out' && chatMsg.wxminires && chatMsg.platform === 'wxmini'" class="send_status failure iconfont icon-tishi"></div>
                          </el-tooltip>
                          <!-- 抖音企业号消息发送失败 -->
                          <el-tooltip :content="dyErrorCode(chatMsg.sendRes)" placement="left">
                            <div v-if="chatMsg.type === 'out' && chatMsg.sendRes && chatMsg.platform === 'dy'" class="send_status failure iconfont icon-tishi"></div>
                          </el-tooltip>
                          <!-- 微信客服消息发送失败 -->
                          <el-tooltip :content="wxkfErrorCode(chatMsg.sendRes)" placement="left">
                            <div v-if="chatMsg.type === 'out' && chatMsg.sendRes && chatMsg.platform === 'wxkf'" class="send_status failure iconfont icon-tishi"></div>
                          </el-tooltip>
                        </div>
                        <div class="chat_item system clearBoth" v-if="chatMsg.type === 'system' || chatMsg.type === 'imcsr' || chatMsg.type === 'sessionFormSubmit'">
                          <div class="chat_content" v-if="chatMsg.type === 'system' && chatMsg.msgType !== 'saveImCSRInfo'">
                            {{(chatMsg.dateTime ? chatMsg.dateTime : '')  + ' ' + chatMsg.message}}
                          </div>
                          <div class="chat_content" v-if="chatMsg.type === 'imcsr' || (chatMsg.type === 'system' && chatMsg.msgType === 'saveImCSRInfo')">
                            <span>{{chatMsg.dateTime ? chatMsg.dateTime : ''}}</span>
                            <span class="imcsrRed" v-if="CSRShowToAgent === 'part' && !satisfactioEvaluation">{{' ' + $t('webchat.userEvaluated')}}</span>
                            <span v-if="CSRShowToAgent === 'all' || satisfactioEvaluation" class="imcsrRed">{{' ' + chatMsg.message}}</span>
                          </div>
                          <div class="chat_item system clearBoth" v-if="chatMsg.contentType === 'sessionFormSubmit'">
                            <div class="chat_content">
                              {{(chatMsg.dateTime ? chatMsg.dateTime : '')  + ' ' + $t('webchat.submitFormMsg', {message: chatMsg.message})}} 
                              <el-popover
                                placement="right"
                                width="300"
                                trigger="hover">
                                <div class="formMsgLi" v-for="(data, i) in chatMsg.sessionFormSubmit">
                                  <span class="formMsgLiAttr">{{i}}</span>:<span class="formMsgLiData" :title="data">{{data}}</span>
                                </div>
                                <el-button class="checkSessionForm" type="text" slot="reference">{{$t('webchat.view')}}</el-button>
                              </el-popover>
                            </div>
                          </div>
                        </div>
                        <div class="clearBoth"></div>
                        <!-- 询中表单消息，发送时的系统消息，需要特殊展示 -->
                        <div class="chat_item system clearBoth sessionForm" v-if="chatMsg.contentType === 'sessionForm'">
                          <div class="chat_content">
                            {{(chatMsg.dateTime ? chatMsg.dateTime : '')  + ' ' + $t('webchat.formMsgTitle', {message: chatMsg.sessionForm ? (chatMsg.sessionForm.formName || '') : ''})}}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <big-image :imgInfo="bigImage" @closeImageDialog="closeBigImage"></big-image>
    </el-col>
    <el-col :span="8" v-if="showFlag">
      <div class="chat_info_box">
        <div class="chat_info">
          <div class="chat_info_todo">
            <!--基本信息-->
            <h3 class="titleInfo" @click="switchInfo('base')">
              <span :class="{'el-icon-plus': !baseInfo, 'el-icon-minus': baseInfo}"></span>
              {{$t('webchat.basicInfo')}}</h3>
            <div v-if="baseInfo" class="chat_info_all">
              <div class="chat_info_li clearBoth" >
                <span class="chat_info_li_title">{{$t('webchat.platformName')}}:</span>
                <span v-html="accessName ? accessName : $t('webchat.nothing')" class="chat_info_li_con"></span>
              </div>
              <div class="chat_info_li clearBoth" >
                <span class="chat_info_li_title">{{$t('webchat.browser')}}:</span>
                <span class="chat_info_li_con">{{browserName}}</span>
              </div>
              <div class="chat_info_li clearBoth" >
                <span class="chat_info_li_title">{{$t('webchat.osInfo')}}:</span>
                <span class="chat_info_li_con">{{osInfo}}</span>
              </div>
              <div class="chat_info_li clearBoth">
                <span class="chat_info_li_title">{{$t('webchat.converNum')}}:</span>
                <span v-html="dialogueTimes !== undefined  ? dialogueTimes : $t('webchat.nothing')" class="chat_info_li_con"></span>
              </div>
              <div class="chat_info_li clearBoth">
                <span class="chat_info_li_title">{{$t('webchat.invitationNum')}}:</span>
                <span v-html="inviteTimes !== undefined ? inviteTimes : $t('webchat.nothing')" class="chat_info_li_con"></span>
              </div>
              <div class="chat_info_li clearBoth" >
                <span class="chat_info_li_title">{{$t('webchat.assistAgent')}}:</span>
                <span v-if="!chatInformation.assistAgent" class="chat_info_li_con">{{$t('webchat.nothing')}}</span>
                <span v-if="chatInformation.assistAgent" class="chat_info_li_con">{{chatInformation.invitedUserName}}</span>
              </div>
              <div class="chat_info_li clearBoth" >
                <span class="chat_info_li_title">{{$t('webchat.invitationStatus')}}:</span>
                <span v-if="chatInformation.inviteUserStatus && chatInformation.inviteUserStatus === 'accept'" class="chat_info_li_con">{{$t('webchat.accecptInvite')}}</span>
                <span v-if="chatInformation.inviteUserStatus && chatInformation.inviteUserStatus === 'undeal'" class="chat_info_li_con">{{$t('webchat.noAccecptInvite')}}</span>
                <span v-if="!chatInformation.inviteUserStatus" class="chat_info_li_con">{{$t('webchat.noInvite')}}</span>
              </div>
              <div class="chat_info_li clearBoth" >
                <span class="chat_info_li_title">{{$t('webchat.are')}}:</span>
                <span class="chat_info_li_con">{{chatInformation.area}}</span>
              </div>
              <div class="chat_info_li clearBoth" >
                <span class="chat_info_li_title">{{$t('webchat.ipAdress')}}:</span>
                <span class="chat_info_li_con">{{chatInformation.ip}}</span>
              </div>
              <div class="chat_info_li clearBoth" >
                <span class="chat_info_li_title">{{$t('webchat.seoKeywords')}}:</span>
                <span class="chat_info_li_con">{{chatInformation.seoKeywords}}</span>
              </div>
              <div class="chat_info_li clearBoth" >
                <span class="chat_info_li_title">{{$t('public.remark')}}:</span>
                <span class="chat_info_li_con">{{displayName.user.remark}}</span>
              </div>
              <!--<div class="chat_info_remark chat_info_li">-->
                <!--<span class="chat_info_li_title">{{$t('public.remark')}}</span>-->
                <!--<textarea class="chat_info_li_remarks" rows="3" :placeholder="$t('public.pleaseEnter')" v-on:blur="editRemark($event)">{{displayName.user.remark}}</textarea>-->
              <!--</div>-->
              <ul class="chat_info_ul">
                <li class="clearBoth chat_info_li"><i>{{$t('webchat.msgNum')}}：</i><span class="chat_info_li_con" :title="chatInformation.totalMsgCount">{{chatInformation.totalMsgCount}}</span></li>
                <li class="clearBoth chat_info_li"><i>{{$t('webchat.endType')}}：</i><span class="chat_info_li_con" :title="chatInformation.finishReason">{{chatInformation.finishReason}}</span></li>
                <li class="clearBoth chat_info_li investigate_box">
                  <i>{{$t('webchat.evalution')}}：</i>
                  <span v-if="CSRShowToAgent === 'part' && !satisfactioEvaluation">{{$t('webchat.userEvaluated')}}</span>
                  <span class="investigate_box_span" v-if="CSRShowToAgent === 'all' || satisfactioEvaluation">
                    <span class="chat_info_li_con" v-if="chatInformation.investigate && chatInformation.investigate.value" :title="chatInformation.investigate.value" @mouseenter="investigateShow(true)">{{chatInformation.investigate.value}}</span>
                  </span>
                  <ul v-if="investigate" class="investigate_con clearBoth" @mouseleave="investigateShow()" @mouseenter="investigateShow(true)">
                    <li class="clearBoth investigate_con_evalution">
                      <i>{{$t('webchat.evalution')}}：</i>
                      <span :title="chatInformation.investigate.value">{{chatInformation.investigate.value}}</span>
                    </li>
                    <li class="clearBoth investigate_con_evalution">
                      <i>{{$t('webchat.evalutionLabel')}}：</i>
                      <span v-if="chatInformation.investigate.label.length > 0" :title="chatInformation.investigate.label">{{chatInformation.investigate.label}}</span>
                    </li>
                    <li class="clearBoth">
                      <i>{{$t('webchat.evalutionContent')}}：</i>
                      <span class="investigate_content">{{chatInformation.investigate.content}}</span>
                    </li>
                  </ul>
                </li>
                <li class="clearBoth chat_info_li"><i>{{$t('webchat.fromSkillGroup')}}：</i><span class="chat_info_li_con" :title="chatInformation.queueName">{{chatInformation.queueName}}</span></li>
                <li class="clearBoth chat_info_li"><i>{{$t('webchat.fromService')}}：</i><span class="chat_info_li_con" :title="agentName">{{agentName}}</span></li>
              </ul>
              <ul class="chat_info_ul">
                <li class="clearBoth chat_info_li"><i>{{$t('webchat.beginDate')}}：</i><span class="chat_info_li_con" :title="chatInformation.beginDate">{{chatInformation.beginDate}}</span></li>
                <li class="clearBoth chat_info_li"><i>{{$t('webchat.artificialStartTime')}}：</i><span class="chat_info_li_con" :title="chatInformation.manualTime">{{chatInformation.manualTime}}</span></li>
                <li class="clearBoth chat_info_li"><i>{{$t('webchat.firstResponseDate')}}：</i><span class="chat_info_li_con" :title="chatInformation.firstReplyTime">{{chatInformation.firstReplyTime}}</span></li>
                <li class="clearBoth chat_info_li"><i>{{$t('webchat.conversationEdnTime')}}：</i><span class="chat_info_li_con" :title="chatInformation.endTime">{{chatInformation.endTime}}</span></li>
                <li class="clearBoth chat_info_li"><i>{{$t('webchat.dialogueDuration')}}：</i><span class="chat_info_li_con" :title="chatInformation.duration">{{chatInformation.duration}}</span></li>
              </ul>
            </div>
            <div v-if="chatInformation.platform === 'pc' || chatInformation.platform === 'wap'"  class="chat_auxiliary_info">
              <h3 class="titleInfo" @click="switchInfo('track')">
                <span :class="{'el-icon-plus': !trackInfo, 'el-icon-minus': trackInfo}"></span>
                {{$t('webchat.trackBrowseCount', { count: ubaInfoList.count ? ubaInfoList.count : 0 })}}
              </h3>
              <div v-if="trackInfo"  id="timeScroll" class="time_line_warp" v-on:scroll="timeScroll($event)">
                <ul>
                  <webChatTimeLine :ubaInfoListPages="ubaInfoList.pages"></webChatTimeLine>
                </ul>
              </div>
            </div>
            <div class="chat_auxiliary_info">
              <h3 class="titleInfo"  @click="switchInfo('visit')">
                <span :class="{'el-icon-plus': !visitInfo, 'el-icon-minus': visitInfo}"></span>
                {{$t('webchat.accessInformation')}}({{visitInfoList.length}}{{$t('webchat.communication')}})
              </h3>
              <!--<div v-if="visitInfo" class="chat_auxiliary_box" v-for="auxiliary in visitInfoList">-->
                <!--<span class="chat_auxiliary_title">{{auxiliary.time}}</span>-->
                <!--<a :href="auxiliary.fromUrl" class="chat_auxiliary_from" target="_blank">{{auxiliary.urlTitle}}</a>-->
              <!--</div>-->
              <div v-if="visitInfo" class="chat_auxiliary_box" v-for="auxiliary in visitInfoList" :key="auxiliary.time">
                <span class="chat_auxiliary_title">{{auxiliary.time}}</span>
                <a v-if="auxiliary.platform === 'pc'" :href="auxiliary.fromUrl" class="chat_auxiliary_from" target="_blank">
                  <span v-if="auxiliary.urlTitle">{{auxiliary.urlTitle}}</span>
                  <span v-else>{{$t('webchat.WebConsultation')}}</span>
                </a>
                <span v-if="auxiliary.platform === 'wap'" class="chat_auxiliary_from">{{$t('webchat.WapConsultation')}}</span>
                <span v-if="auxiliary.platform === 'sdk'" class="chat_auxiliary_from">{{$t('webchat.SdkConsultation')}}</span>
                <span v-if="auxiliary.platform === 'weixin'" class="chat_auxiliary_from">{{$t('webchat.WeiXinConsultation')}}</span>
                <span v-if="auxiliary.platform === 'wxmini'" class="chat_auxiliary_from">{{$t('webchat.WxminiConsultation')}}</span>
                <span v-if="auxiliary.platform === 'weibo'" class="chat_auxiliary_from">{{$t('webchat.WeiboConsultation')}}</span>
                <span v-if="auxiliary.platform === 'dy'" class="chat_auxiliary_from">{{$t('webchat.platformTikTok')}}</span>
                <span v-if="auxiliary.platform === 'wxkf'" class="chat_auxiliary_from">{{$t('webchat.platformWXKF')}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<script type="text/javascript">
  import CustomerAvatar from '@/components/ui-modules/customer-avatar/CustomerAvatar'
  import { deepClone, millsToDate, getFormatDateTime, getCache, contains } from '@/utils/m7Utils'
  import * as types from '@/store/mutation-types.js'
  import BigImage from '@/components/public-modules/bigImage/BigImage'
  import PopDragSearch from '@/components/public-modules/popups/PopDragSearch'
  import webChatTimeLine from '../../ui-modules/timeLine/webChatTimeLine'
  import WebchatChatVoice from './WebchatChatVoice.vue'
  import { common } from '@/utils/cosUrl'
  var UAParser = require('ua-parser-js');
  var parserFun = new UAParser();
  export default {
    name: 'webchatview25',
    props: {
      chatInformationId: String,
      showFlag: {
        type: Boolean,
        default: false
      },
      qualityCheck: {
        type: Boolean,
        default: false
      },
      sessionId: {
        type: String,
        default: ''
      },
      showFirstWord: {
        type: Boolean,
        default: false
      },
      qualityScore: { // 质检评分
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        isEcommerce: this.$store.getters.isEcommerce ? true : false,
        status: '',
        displayName: {
          user: {},
          row: {}
        },
        chatInformation: {},
        contectHistoryList: [],
        tabType: '',
        customerId: '',
        CSRShowToAgent: 'all',
        webchatData: {},
        visitInfoList: [],
        bigImage: {
          bigImageShow: false,
          url: ''
        },
        iconFont: '',
        remarkClone: '',
        webchatDataClone: {},
        ubaInfoList: [],
        investigate: false,
        baseInfo: true,
        trackInfo: true,
        visitInfo: false,
        currentPage: 1,
        finishChatScroll: false,
        loadFlag: true,   // 加载联系历史的时候
        page: 1,
        ubaSessionId: '', // ubaSessionId 用来确定唯一的用户浏览轨迹
        loading: false,
        lastNum: 0,
        osInfo: '', // 操作系统
        browserName: '',
        dialogueTimes: '',
        inviteTimes: '',
        accessName: '',  // 平台名称
        showExtraInfoMap: {},    // 缓存商品信息卡片更多信息展示
        common,
        reSendFile:null,
        fileType:['mp4', 'f4v', 'm4v', 'mkv', 'mov', 'webm'],
        imgType:['jpe', 'jpeg', 'jpg', 'gif', 'png', 'webp','heic','bmp','ico','tif','jfif']
      }
    },
    methods: {
      showExtraInfo (msg) {
        console.log(msg)
        if (this.showExtraInfoMap[msg._id] !== undefined) {
          this.showExtraInfoMap[msg._id] = !this.showExtraInfoMap[msg._id]
        } else {
          this.$set(this.showExtraInfoMap, msg._id, false)
        }
      },
      wechatErrorCode (errcode) { // 小程序客服错误码
        let errorMsg = ''
        if (errcode) {
          errorMsg = 'webchat.errorCode.errcode_' + errcode
          return this.$t(errorMsg)
        } else {
          return ''
        }
      },
      dyErrorCode (errcode) { // 抖音客服错误码
        let errorMsg = ''
        if (errcode) {
          errorMsg = 'webchat.dyErrorCode.dyerrcode_' + errcode
          return this.$t(errorMsg)
        } else {
          return ''
        }
      },
      wxkfErrorCode (errcode) { // 抖音客服错误码
        let errorMsg = ''
        if (errcode) {
          errorMsg = 'webchat.wxkfErrorCode.wxkferrcode_' + errcode
          return this.$t(errorMsg)
        } else {
          return ''
        }
      },
      openNewRichText (url) {
        if (url) {
          window.open(url)
        }
      },
      screenShareDesc (data) {
        if (data === 'agentCancel') {
          return this.$t('screenShare.shareHasBeenCancel')
        } else if (data === 'custRefuse') {
          return this.$t('screenShare.shareNotBeAnswer')
        } else if (data === 'agentFinish') {
          return this.$t('screenShare.shareTimeLength')
        } else {
          return this.$t('screenShare.shareHasBeenCancel')
        }
      },
      VideoDesc (data) {
        if (data === 'cancel') {
          return this.$t('videoChat.videoHasBeenCancel')
        } else if (data === 'refuse') {
          return this.$t('videoChat.videoNotBeAnswer')
        } else if (data === 'Hangup' || data === 'hangup') {
          return this.$t('videoChat.videoTimeLength')
        } else {
          return this.$t('videoChat.videoHasBeenCancel')
        }
      },
      videoTimeCom (time) {
        var hours = Math.floor(time / (3600 * 1000))
        var hoursleft = time % (3600 * 1000)
        var minutes = Math.floor(hoursleft / (60 * 1000))
        var minutesleft = hoursleft % (60 * 1000)
        var seconds = Math.floor(minutesleft / 1000)
        if (seconds === 60) {
          minutes = minutes + 1
          seconds = 0
        }
        if (minutes === 60) {
          hours = hours + 1
          minutes = 0
        }
        var h = hours > 9 ? hours : '0' + hours
        var m = minutes > 9 ? minutes : '0' + minutes
        var s = seconds > 9 ? seconds : '0' + seconds
        return h + ':' + m + ':' + s
      },
      currentLocation (event) {
        let height = document.getElementsByClassName('chat_msg')[0].scrollHeight
        return this.showFirstWord ? event.target.scrollHeight === height : event.target.scrollTop < 1
      },
      getChatHistory (e) {
        const scrollTop = e.target.scrollTop
        const scrollHeight = e.target.scrollHeight
        const offsetHeight = e.target.getBoundingClientRect().height
        const currentHeight = Math.ceil(scrollTop + offsetHeight)
        if (currentHeight >= scrollHeight) {
          this.getChatHistoryScroll(e)
        }
      },
      getChatHistoryScroll (event) {
        let height = document.getElementsByClassName('msg_inner1')[0].scrollHeight
        if (this.currentLocation(event) && !this.finishChatScroll && this.loadFlag) {
          this.loadFlag = false
          let sendData = {page: ++this.page, sessionId: this.chatInformationId, limit: 10}
          sendData.showFirstWord = this.showFirstWord ? true : false
          this.$store.dispatch('queryUserContactHistory', sendData).then((resp) => {
            // this.loadFlag = true
            if (resp.list.length) {
              var resArr = deepClone(resp.list)
              resArr.forEach((obj, index) => {
                if (obj.contentType === 'cardInfo') {
                  if (this.showExtraInfoMap[obj._id] === undefined) {
                    this.$set(this.showExtraInfoMap, obj._id, false)
                  }
                }
                if (obj.message.indexOf('&lt;7moorbr/&gt;') > -1 || obj.message.indexOf('<7moorbr/>') > -1) {
                  obj.message = obj.message.replace(/<7moorbr\/>/g, '<br />')
                  obj.message = obj.message.replace(/&lt;7moorbr\/&gt;/g, '<br />')
                }
                if ((obj.contentType === 'newCardInfo' || obj.contentType === 'msgTask' || obj.msgType === 'msgTask') && obj.newCardInfo) {
                  try {
                    obj.newCardInfo = JSON.parse(decodeURIComponent(obj.newCardInfo))
                  }
                  catch {
                    obj.newCardInfo = JSON.parse(obj.newCardInfo)
                  }
                  if (obj.newCardInfo.tags && obj.newCardInfo.tags.length > 0) {
                    obj.newCardInfo.tags = obj.newCardInfo.tags.slice(0, 2)
                  }
                }
                if (obj.contentType === 'sessionForm') {
                  try {
                    obj.sessionForm = JSON.parse(obj.sessionForm)
                  }
                  catch {}
                }
                if (obj.contentType === 'sessionFormSubmit') {
                  try {
                    obj.sessionFormSubmit = JSON.parse(obj.sessionFormSubmit)
                  }
                  catch {}
                }
                if (obj.contentType === 'xbotFormSubmit') {
                  try {
                    obj.xbotFormSubmit = JSON.parse(obj.xbotFormSubmit)
                  }
                  catch {}
                }
                if (obj.contentType === 'xbotForm') {
                  try {
                    obj.xbotForm = JSON.parse(obj.xbotForm)
                  }
                  catch {}
                }
                if (obj.clientAutoClose) {
                  // 访客端会话被自动结束
                  obj.message = this.$t('webchat.clientAutoClose')
                }
              })
              this.contectHistoryList = this.showFirstWord ? (this.contectHistoryList).concat(resArr) : (resArr).concat(this.contectHistoryList)
              console.log(this.contectHistoryList, '会话详情。。。。')
              if (!this.qualityScore) {
                event.target.scrollTop = height - this.lastNum
                this.lastNum = height
              }
            } else {
              this.finishChatScroll = true
            }
            this.$nextTick(function () {
              this.loadFlag = true
            })
          })
        }
//        else if (event.target.scrollTop > 30 && this.loadFlag) {
//          this.numLock = true
//        }
      },
      trim (data) {
        let _str = data
        return _str.replace(/(^\s*)|(\s*$)/g, '')
      },
//      编辑备注
      editRemark (event) {
        if (this.remarkClone !== event.target.value) {
          let remark = {
            accessId: this.webchatData.accessId,
            sid: this.webchatData.sid,
            _id: this.webchatData._id,
            content: event.target.value
          }
          this.$store.dispatch('updateWebchatSessionRemark', remark).then(() => {
            this.remarkClone = event.target.value
//            this.displayName.user.remark = event.target.value
          })
        }
      },
      fetchData () {
        let self = this
        this.CSRShowToAgent = getCache('CSRShowToAgent') || 'all'
        this.$store.dispatch('queryChatInformationById', {_id: this.chatInformationId, queryHistory: true}).then((resp) => {
          let obj1 = resp.chatSession
          let obj = deepClone(obj1)
          if (obj.firstReplyTime) {
            obj.firstReplyTime = getFormatDateTime(new Date(obj.firstReplyTime)).split(' ')[1]
          }
          if (obj.beginTime) {
            let tempD = new Date(obj.beginTime)
            obj.beginDate = tempD.getFullYear() + '-' + (tempD.getMonth() + 1) + '-' + tempD.getDate()
            obj.beginTime = obj.beginTime.split(' ')[1]
          }
          if (obj.agentFirstReplyTime) {
            obj.agentFirstReplyTime = getFormatDateTime(new Date(obj.agentFirstReplyTime)).split(' ')[1]
          }
          if (obj.firstReplyTime) {
            obj.firstReplyTime = obj.agentFirstReplyTime
          }
          if (obj.endTime) {
            obj.endTime = getFormatDateTime(new Date(obj.endTime))
            if (obj.beginTime && obj.endTime.split(' ')[0] === obj.beginTime.split(' ')[0]) {
              obj.endTime = obj.endTime.split(' ')[1]
            }
          }
          let desc = ''
          if (obj.lastTimeStamp) {
            let descTime = new Date()
            descTime.setTime(obj.lastTimeStamp)
            desc = getFormatDateTime(descTime)
          }
          if (desc && obj.manualTime) {
            obj.duration = millsToDate(new Date(desc).getTime() - new Date(obj.manualTime).getTime())
          }
          if (obj.manualTime) {
            obj.manualTime = getFormatDateTime(new Date(obj.manualTime)).split(' ')[1]
          }
          if (!obj.investigate.value) {
            this.$set(obj.investigate, 'value', '')
          }
          this.chatInformation = obj
          this.visitInfoList = resp.historyList
          if (self.chatInformation.navigator) {
            var output = {}
            try {
              output = parserFun.setUA(self.chatInformation.navigator).getResult()
            } catch (error) {}

            if (output && output.browser && output.browser.name) {
              self.browserName = output.browser.name
              if (output.browser.version) {
                self.browserName = output.browser.name + ' ' + output.browser.version
              }
            }

            if (output && output.os && output.os.name) {
              self.osInfo = output.os.name
              if (output.os.version) {
                self.osInfo = output.os.name + ' ' + output.os.version
              }
            }
            if (output && output.device && output.device.type === 'mobile') {
              self.osInfo = self.osInfo + ' ' + output.device.model
            }
          }

          if (!self.osInfo && self.chatInformation.ubaInfo) {
            self.osInfo = self.chatInformation.ubaInfo.osInfo || this.$t('webchat.nothing')
          }
          if (!self.browserName && self.chatInformation.ubaInfo) {
            self.browserName = self.chatInformation.ubaInfo.browserName || this.$t('webchat.nothing')
          }
          if (self.chatInformation.dialogueTimes !== undefined) {
            self.dialogueTimes = self.chatInformation.dialogueTimes.toString() || ''
          }
          if (self.chatInformation.inviteTimes !== undefined) {
            self.inviteTimes = self.chatInformation.inviteTimes.toString() || ''
          }
          if (self.chatInformation.accessName !== undefined) {
            self.accessName = self.chatInformation.accessName || ''
          }
          this.$store.dispatch('popupWebchatById', {_id: this.chatInformationId, sid: this.chatInformation.sid}).then((resp) => {
            if (resp.row) {
              this.chatInformation.sName = resp.row.name
              this.displayName = resp
            } else {
              this.displayName.user = resp.user
              this.displayName.row = {}
            }
            this.loading = true
            // 载入用户的浏览轨迹   需要
            this.ubaSessionId = ''
            if (this.chatInformation.ubaInfo && this.showFlag) {
              this.$store.dispatch('loadUbaInfo', {_verification_liid: '', ubaSessionId: this.chatInformation.ubaInfo.ubaSessionId, ubaPageId: this.chatInformation.ubaInfo.ubaPageId, ubaHistory: true}).then((sessionId) => {
                if (sessionId) {
                  this.ubaSessionId = sessionId
                  this.ubaInfoList = this.$store.state.webchat.ubaInfoList[sessionId]
                }
              })
            }
          })
        })
        let sendData = {page: 1, sessionId: this.chatInformationId, limit: 10}
        sendData.showFirstWord = this.showFirstWord ? true : false
        this.$store.dispatch('queryUserContactHistory', sendData).then((resp) => {
          self.contectHistoryList = resp.list
          self.showExtraInfoMap = {}
          console.log(self.contectHistoryList)
          self.contectHistoryList.forEach((obj, index) => {
            if (obj.contentType === 'cardInfo') {
              if (this.showExtraInfoMap[obj._id] === undefined) {
                this.$set(this.showExtraInfoMap, obj._id, false)
              }
            }
            if (obj.message.indexOf('&lt;7moorbr/&gt;') > -1 || obj.message.indexOf('<7moorbr/>') > -1) {
              obj.message = obj.message.replace(/<7moorbr\/>/g, '<br />')
              obj.message = obj.message.replace(/&lt;7moorbr\/&gt;/g, '<br />')
            }
          })
          this.showExtraInfoMap = {}
          this.contectHistoryList.forEach((obj, index) => {
            if (obj.contentType === 'cardInfo') {
              if (this.showExtraInfoMap[obj._id] === undefined) {
                this.$set(this.showExtraInfoMap, obj._id, false)
              }
            }
            if (obj.message.indexOf('&lt;7moorbr/&gt;') > -1 || obj.message.indexOf('<7moorbr/>') > -1) {
              obj.message = obj.message.replace(/<7moorbr\/>/g, '<br />')
              obj.message = obj.message.replace(/&lt;7moorbr\/&gt;/g, '<br />')
            }
            if ((obj.contentType === 'newCardInfo' || obj.contentType === 'msgTask' || obj.msgType === 'msgTask') && obj.newCardInfo) {
              try {
                obj.newCardInfo = JSON.parse(decodeURIComponent(obj.newCardInfo))
              }
              catch {
                obj.newCardInfo = JSON.parse(obj.newCardInfo)
              }
              if (obj.newCardInfo.tags && obj.newCardInfo.tags.length > 0) {
                obj.newCardInfo.tags = obj.newCardInfo.tags.slice(0, 2)
              }
            }
            if (obj.contentType === 'sessionForm') {
              try {
                obj.sessionForm = JSON.parse(obj.sessionForm)
              }
              catch {}
            }
            if (obj.contentType === 'sessionFormSubmit') {
              try {
                obj.sessionFormSubmit = JSON.parse(obj.sessionFormSubmit)
              }
              catch {}
            }
            if (obj.contentType === 'xbotFormSubmit') {
              try {
                obj.xbotFormSubmit = JSON.parse(obj.xbotFormSubmit)
              }
              catch {}
            }
            if (obj.contentType === 'xbotForm') {
              try {
                obj.xbotForm = JSON.parse(obj.xbotForm)
              }
              catch {}
            }
            if (obj.clientAutoClose) {
              // 访客端会话被自动结束
              obj.message = this.$t('webchat.clientAutoClose')
            }
          })
          let that = this
//          window.setTimeout(function () {
//            that.changeChatMsgScroll()
//          }, 300)
          let timeInterval = window.setInterval(function () {
            if (document.getElementsByClassName('chat_msg1').length && document.getElementsByClassName('chat_msg1')[0].scrollHeight > 0 && !that.showFirstWord) {
              that.changeChatMsgScroll()
              window.clearInterval(timeInterval)
            }
          }, 100)
        })
      },
      scrollToBottom (scrollClassName, warpClassName) {
        this.$nextTick(function () {
          if (document.getElementsByClassName(warpClassName).length) {
            document.getElementsByClassName(scrollClassName)[0].scrollTop = document.getElementsByClassName(warpClassName)[0].scrollHeight
          }
        })
      },
      closeBigImage () {
        this.bigImage.bigImageShow = false
        this.bigImage.url = ''
      },
      showBigImage (data) {
        let msg = {
          show: true,
          url: data
        }
        this.$store.commit(types.SET_OLD_BIGIMG, msg)
      },
      changeChatMsgScroll () {
        this.$nextTick(function () {
          this.scrollToBottom('chat_msg1', 'msg_inner1')
        })
      },
//      获取座席头像
      im_icon (obj) {
        let data = ''
        if (obj.im_icon) {
          data = obj.im_icon + '?imageView2/1/w/50/h/50'
        } else {
          if (obj.user && obj.user !== 'system' && obj.user !== 'robot') {
            let agent = getCache('agents', obj.user)
            if (agent.im_icon) {
              data = agent.im_icon + '?imageView2/1/w/50/h/50'
            } else {
              data = ''
            }
          } else if (obj.user === 'robot') {
            data = 'robot'
          }
        }
        return data
      },
      investigateShow (flag) {
        if (flag) {
          this.investigate = true
        } else {
          this.investigate = false
        }
      },
//     格式化时间
      chatTime (item) {
        let timeNew = item.dateTime
        if (item.uidDesc) {
          timeNew += ` ${item.uidDesc}`
        }
        return timeNew
      },
//      语音播放
      changeVoicePlay (chatMsg, flag) {
        if (chatMsg.play) {
          chatMsg.play = false
        } else {
          this.contectHistoryList.forEach(function (item, index) {
            item.play = false
          })
          chatMsg.play = !chatMsg.play
        }
      },
//      加减号
      switchInfo (type) {
        if (type === 'track') {
          if (!this.visitInfo) {
            this.trackInfo = !this.trackInfo
          } else {
            this.trackInfo = !this.trackInfo
            this.visitInfo = !this.visitInfo
          }
        } else if (type === 'base') {
          this.baseInfo = !this.baseInfo
        } else if (type === 'visit') {
          if (!this.trackInfo) {
            this.visitInfo = !this.visitInfo
          } else {
            this.visitInfo = !this.visitInfo
            this.trackInfo = !this.trackInfo
          }
        }
      },
      timeScroll (event) { // 滚动加载更多浏览轨迹 需要
        let nScrollHight = 0
        let nScrollTop = 0
        let nDivHight = event.target.offsetHeight
        nScrollHight = event.target.scrollHeight
        nScrollTop = event.target.scrollTop
        if (nScrollTop + nDivHight + 2 >= nScrollHight) { // 解决不同分辨率下scrollTop的差异
          this.currentPage += 1
          this.$store.dispatch('loadUbaInfo', {_id: '', ubaSessionId: this.chatInformation.ubaInfo.ubaSessionId, ubaPageId: this.chatInformation.ubaInfo.ubaPageId, ubaHistory: true, currentPage: this.currentPage}).then((sessionId) => {
            if (sessionId) {
              this.ubaSessionId = sessionId
              this.ubaInfoList = this.$store.state.webchat.ubaInfoList[sessionId]
            }
          })
        }
      }
    },
    watch: {
      chatInformationId () {
        this.finishChatScroll = false
        this.loadFlag = true
        this.page = 1
        this.fetchData()
        if (this.qualityScore) {
          this.$nextTick(() => { // 初始化滚动条位置为0
            this.$refs.chatMsgs.scrollTop = 0
          })
        }
      }
    },
    components: {
      CustomerAvatar,
      BigImage,
      WebchatChatVoice,
      PopDragSearch,
      webChatTimeLine
    },
    computed: {
      agentName () {
//        let agents = this.$store.state.session.dicMap.agents
//        let agents = this.$getCache('agents')
//        let current = ''
//        for (let i in agents) {
//          if (this.displayName.user && agents[i]._id === this.displayName.user.user) {
//            current = agents[i].displayName
//            break
//          }
//        }
//        return current
        let data = ''
        if (this.displayName.user && this.displayName.user.user) {
          data = this.$store.getters.agents[this.displayName.user.user].displayName
        }
        return data
      },
      satisfactioEvaluation () {
        return this.$store.state.session.user.funcIds && contains(this.$store.state.session.user.funcIds, 'func_satisfactio_evaluation')
      },
//      获取平台来源
      chatMethod () {
        let platform = ''
        if (this.chatInformation.platform === 'pc') {
          if (this.chatInformation.sName === '访客留言' || this.chatInformation.leavemsg) {
            platform = this.$t('webchat.leaveMessage')
          } else {
            platform = this.$t('webchat.platformPc')
          }
        } else if (this.chatInformation.platform === 'wap') {
          platform = this.$t('webchat.platformWap')
        } else if (this.chatInformation.platform === 'sdk') {
          platform = this.$t('webchat.platformApp')
        } else if (this.chatInformation.platform === 'weixin') {
          platform = this.$t('webchat.platformWeixin')
        } else if (this.chatInformation.platform === 'wxmini') {
          platform = this.$t('webchat.platformWeixinMini')
        } else if (this.chatInformation.platform === 'weibo') {
          platform = this.$t('webchat.platformWeibo')
        } else if (this.chatInformation.platform === 'wxwork') {
          platform = this.$t('webchat.enterpriseShot')
        } else if (this.chatInformation.platform === 'ocpc') {
          platform = this.$t('webchat.baiduBCP')
        } else if (this.chatInformation.platform === 'dy') {
          platform = this.$t('webchat.TikTok')
        } else if (this.chatInformation.platform === 'wxkf') {
          platform = this.$t('webchat.platformWXKF')
        } else {
          platform = this.$t('webchat.platformOther')
        }
        return platform
      }
    },
    beforeMount () {
      this.loading = false
      this.fetchData()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .agentName
    padding-left 10px
  .chat_info_box
    overflow hidden
    margin-top 38px
  .chat_info_box .chat_info_label
    display inline-block
  .active
    background $c-card
  .chat_top
    position relative
    box-sizing border-box
  .chat_top_head
    float left
    height 40px
    max-width 100%
    box-sizing border-box
    position relative
    line-height 44px
  .chat_transfer
    float right
  .avatar
    position absolute
    left 0
  .title
    margin-left 14px
  .dic_item
    textarea
      color $cf-gray0
      border-color $cf-level2
      width 100%
      padding 6px
      box-sizing border-box
      border-radius 4px
    textarea:focus
      border-color $c-main
  .chat_transfer
    .iconfont
      cursor pointer
      font-size 20px
      margin 5px 6px 0
      line-height 30px
      color $cf-gray5
    .icon-tuichu
      margin-right 10px
  .chatMsgCon
    border 1px solid $c-border1
    margin-left 10px
  .chat_msg
    padding 14px
    box-sizing border-box
    overflow auto
    height calc( 100vh - 320px)
  .webchat_todo_conbox
    .chat_msg
      height calc( 100vh - 334px)
  .webchat_all_conbox
    .chat_msg
      height calc( 100vh - 328px + 121px)
  .webchat_laterProcess_conbox
    .chat_msg
      height calc( 100vh - 328px + 121px + 112px)
  .chat_item
    position relative
    max-width 70%
    padding-left 34px
    .imcsrRed
      color $c-pink
  .chat_user_info
    position absolute
    left 0
    top 0
    .chat_time
      position absolute
      white-space nowrap
      font-size 12px
      color $cf-gray4
      top -16px
      left 56px
  .chat_user_img
    border-radius 50%
    width 40px
    height 40px
    overflow hidden
    background url("../../public-modules/contact-summary/img/agent.png") no-repeat 50% 50%
    background-size 32px auto
    img
      background $cf-white
      width 100%
  .robot
    background $c-border1
    .icon-jiqirentouxiang
      width 32px
      height 32px
      display block
      text-align center
      line-height 32px
      font-size 30px
      color: #fff
      font-size: 24px
  .chat_time
    color #9A9A9A
    width auto
    line-height 16px
    text-align center
  .chat_msg_goods_info
    width: 100%;
    max-width 355px;
    overflow: hidden;
    background: #fff;
    margin-bottom: 10px;
    border: solid 1px #d9d9d9;
    border-radius: 2px;
    cursor pointer
    margin-left 5px
    .m7GoodsInfo
      padding: 10px;
      margin: 0;
      vertical-align: top;
      .goodInfoLeft
        height: 50px;
        width: 50px;
        text-align: center;
        vertical-align: center;
        display: inline-block;
        margin-right 10px
        img
          max-width 50px
          max-height 50px
      .goodInfoRight
        display: inline-block;
        vertical-align: top;
        span
          display: inline-block;
          overflow: hidden;
          white-space: nowrap;
          width: 100%;
          text-overflow: ellipsis;
        .goodInfoRight1
          color: #000;
          font-size: 12px;
          text-decoration underline
        .goodInfoRight2
          font-size: 12px;
          color: #595959;
        .goodInfoRight3
          font-size: 14px;
          color: #ff6b6b;
        .MoreGoodsInfo
          text-align right
          text-decoration underline
          cursor: pointer
  .chat_content
    max-width 90%
    padding 8px 12px
    position relative
    margin-left 10px
    margin-top 2px
    border-radius 14px
    background #cce6ff
    display inline-block
    color $cf-gray0
    .chat_msg_richText
      cursor pointer
      width 200px
      min-height 60px
      padding 5px
      .richTextTitle
        width 200px
        font-size 14px
        display: -webkit-box;
        box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-decoration underline
      .chat_msg_richText_bottom
        width 200px
        margin-top 6px
        .richTextDescription
          display inline-block
          color: $c-log
        .richTextPicUrl
          display inline-block
          float right
          width 55px
          height 40px
    .chat_img
      max-width 100px
    .send_status
      position absolute
      width 26px
      height 26px
      border-radius 50%
      left -30px
      top 50%
      margin-top -13px
    .send_status.process
      background url('./img/webchat_send.gif') no-repeat
      background-size 26px 26px
    .send_status.failure
      color $c-prompt
      text-align center
      line-height 26px
      font-size 24px
    .chat_content_text
      word-break break-all
      white-space normal
      p
        img
          max-width 100%
  .chat_content_arrow
    border-top 6px solid transparent
    border-bottom 6px solid transparent
    border-right 6px solid #cce6ff
    content ' '
    position absolute
    width 0
    height 0
    left -9px
    top 10px
    border-radius 1px
    transform rotate(95deg)
    border 5px solid #cce6ff
    border-color #cce6ff transparent transparent #cce6ff
  .chatPreloadedMsg
    margin-bottom 20px
    .chat_content
      background #1cd0e0
    .chat_content_arrow
      border 5px solid #1cd0e0
      border-color #1cd0e0 transparent transparent #1cd0e0
  .chat_user_info_out
    position absolute
    right 0
    top -2px
    .chat_time
      position absolute
      white-space nowrap
      font-size 12px
      color $cf-gray4
      right 56px
      top -16px
    img
      width 32px
      height 32px
  .chat_item.out
    padding-right 38px
    float right
    .chat_user_img
      border-radius 50%
      width 32px
      height 32px
      float right
    .chat_content
      float right
      background #f0f0f0
      margin 0 5px 0 0
      color $cf-gray0
  .chat_content_arrow_out
    border-left 6px solid #f0f0f0
    border-top 6px solid transparent
    border-bottom 6px solid transparent
    border-right 6px solid #f0f0f0
    content ' '
    position absolute
    width 0
    height 0
    right -9px
    top 10px
    border-radius 1px
    transform rotate(83deg)
    border 5px solid #f0f0f0
    border-color transparent transparent #f0f0f0 #f0f0f0
  .chat_item.system
    text-align center
    padding 0
    width 100%
    max-width 100%
    .chat_content
      display inline-block
      width auto
      border-radius: 13px
      text-align center
      display inline-block
      padding 0 14px
      line-height 26px
      background $c-bus-back
      color $cf-gray0
  .chat_msg_con
    textarea
      resize none
  .el-form-item
    margin 0
  .replyMsg
    float right
    margin-right 12px
  .msg_do
    margin 0 10px 0
    float left
    color $cf-gray5
  .fontSize
    min-width 20px
  .fontSize
    li
      line-height 28px
  .upload
    display inline-block
    width 22px
  .blacklist_con
    resize none
  .other_msg
    padding-top 5px
    height 23px
    .iconfont
      font-size 18px
      cursor pointer
    .iconfont:hover
      color $c-main
    .icon-zhishikujiansuo
      font-size 20px
  .upload
    width 20px
  .chat_info
    position relative
    .chat_info_all,.chat_info_todo
      box-sizing border-box
    .chat_info_todo
    /*.chat_info_all*/
      overflow auto
      padding 0 5px 0px 10px
      box-sizing border-box
      height calc(100vh - 316px)
    .chat_auxiliary_info
      /*padding-bottom 10px*/
      line-height 18px
      h3 + .chat_auxiliary_box
        a
          color $c-main
  .chat_info_li_title,.chat_auxiliary_title,.chat_info_all i
    color $cf-gray3
    font-style normal
  .chat_info_li_con,.chat_auxiliary_from
    color $cf-level2
    float right
  .chat_info_li_remarks
    border none
    resize none
    font-size 12px
    box-sizing border-box
    width 100%
    margin-top 6px
    border-color $cf-gray5
    padding 6px
    border-radius 4px
  .chat_info_li_remarks:focus
    border-color $c-main
  .el-tree
    border none
  .color
    color #1f2d3d
      display none
      padding-left 18px
  .msg_li
    min-height 40px
    margin-bottom 25px
  .msg_li.system_li
    margin 10px 0 20px
    min-height 40px
  .font14
    font-size 14px
  .client_msg
    height 36px
  .wxend
    text-align center
    padding 5px
    display block
    z-index 10000
    color $cf-level2
  .chat_info,.chat_info_all
    h3
      color $cf-level3
    .chat_info_li
      margin-bottom 5px
      padding-right 4px
      box-sizing border-box
    .chat_info_li.chat_info_li_title
      display inline-block
    .chat_info_remark
      margin 8px 0 6px
  .chat_info_all
    h3
      padding-bottom 10px
  .chat_info_ul
    margin-bottom 10px
    li
      display block
    span
      float right
      display inline-block
      max-width 100%
      text-overflow ellipsis
      white-space nowrap
      overflow hidden
  .chat_info_time_data
    margin-top 20px
  .icon-tishi
    color $c-pink
  .chat_content.image
    img
      cursor pointer
    .chat_img
      max-width 100px
  .chat_message_con_text
    word-break break-all
  .prompt
    text-align center
    color $cf-gray3
    font-size 12px
    padding 3px 0
  .chat_title
    margin-bottom 4px
    font-size 14px
    color $cf-gray0
    width 100%
    overflow hidden
    white-space nowrap
    text-overflow ellipsis
  .chat_title_time
    margin-left 16px
    font-size 12px
    color $cf-gray4
  .chat_title_type
    margin-left 4px
  .webchat_el_form
    height 65px
  .investigate_box
    position relative
    .investigate_box_span
      max-width calc(100% - 40px)
  .investigate_con
    position absolute
    bottom 0
    width 100%
    left 0
    background $cf-white
    box-shadow 0 0 8px #aaa
    padding 8px
    box-sizing border-box
    li
      margin-bottom 6px
    .investigate_content
      /*float none*/
      clear both
      display inline
      word-break break-all
      white-space normal
      span
        color $cf-level2
    .investigate_con_evalution
      span
        max-width calc(100% - 40px)
  .audio_img
    height 15px
    margin-right 15px
  .voice_content.chat_content
    position relative
    .chat_message_con
      cursor pointer
  .chat_info .titleInfo
    cursor pointer
    font-weight bold
    color $cf-gray2
    margin-bottom 6px
    .el-icon-minus,.el-icon-plus
      color $cf-level3
  .chat_item.in a
    color $cf-white
  .chat_item.out a
    color $cf-level1
  .investigate_con
    span
      /*float none*/
      clear both
      vertical-align bottom
  .el-dialog__wrapper
    z-index 30001 !important
  .VideoTips
    .el-dialog__body
      .tipsword
        text-align center
        font-size 16px
        margin 10px 0
      .tipsbutton
        text-align center
        padding-top 15px
    .el-dialog__header
      padding-bottom 20px
      border-bottom 1px solid #a1a1a1
      span
        color #a2a2a2
  .colorred
    color $c-prompt
  .chatUserMsg
    margin-top 15px
  .chat_item.in
    .chat_message_con
      min-height 1em
      min-width 0.5em
  .chat_auxiliary_box
    padding-right 4px
  .fade-enter-active,
  .fade-leave-active
    transition all 0.5s ease
  .fade-enter,
  .fade-leave-active
    opacity 0
  .send_chat_msg_title
    line-height 30px
    color $cf-gray1
  .time_line_warp
    max-height calc(100vh - 562px);
    overflow-y auto
    padding-bottom 10px
  .uba_page_stay
    font-size 12px
    position absolute
    left 25px
    top 15px
  .uba_time_warp
    display block
  .currentUrl_warp
    display block
    padding-left 5px
    word-break break-all
  .time_line_box
    display flex
  .webchat_chat_info
    textarea::-webkit-input-placeholder
      color $cf-gray5
  .chat_info_all_title
    font-weight bold
    font-size 14px
    color $cf-gray2
    height 35px
    line-height 35px
    box-sizing border-box
    padding 0 14px
    border-bottom 1px solid $c-border1
  .history_lichat_contentading
    text-align center
    .history_liading_text
      display inline-block
      span
        vertical-align super
  .wecbat_video_thunmbnail
    max-width 200px
  .wechat_video
    cursor pointer
    color $c-main
    position relative
    a
      display inline-block
      .wechat_video_play_icon
        position absolute
        width 100%
        height 100%
        .play_icon
          position absolute
          width 64px
          height 64px
          margin -32px 0 0 -32px
          top 50%
          left 50%
          background url('./img/play_icon.png') no-repeat center 0
          z-index 2
  .send_status.failure
    color $c-pink
    text-align center
    line-height 20px
    font-size 20px
    position absolute
    left -0.5em
    top 50%
    transform translateY(-50%)
    padding 13px
  .robot_cardinfo
    margin-left 10px
  .chat_msg_newCardInfo
    cursor pointer
    width: 300px
    min-height: 100px
    padding 10px
    position relative
    border-radius 14px
    background #ffffff
    display inline-block
    line-height 26px
    background #ffffff
    border 1px solid #EBEBEB
    clear both
    .chat_cardInfo_arrow_out
      border-left 6px solid #EBEBEB
      border-top 6px solid transparent
      border-bottom 6px solid transparent
      border-right 6px solid #EBEBEB
      content ' '
      position absolute
      width 0
      height 0
      right -9px
      top 6px
      border-radius 1px
      transform rotate(83deg)
      border 5px solid #EBEBEB
      border-color transparent transparent #EBEBEB #EBEBEB
    .chat_cardInfo_arrow_out::after
      content: ' ';
      position: absolute;
      width: 0;
      height: 0;
      right: -4px;
      top: -3px;
      border-radius: 1px;
      -webkit-transform: rotate(83deg);
      transform: rotate(0);
      border: 4px solid #fff;
      border-color: transparent transparent #fff #fff;
      border-color transparent transparent #fff #fff
    .chat_cardInfo_arrow
      border-top 6px solid transparent
      border-bottom 6px solid transparent
      border-right 6px solid #EBEBEB
      content ' '
      position absolute
      width 0
      height 0
      left -9px
      top 15px
      border-radius 1px
      transform rotate(95deg)
      border 5px solid #EBEBEB
      border-color #EBEBEB transparent transparent #EBEBEB
    .chat_cardInfo_arrow::after
      content: ' ';
      position: absolute;
      width: 0;
      height: 0;
      right: -4px;
      top: -5px;
      border-radius: 1px;
      -webkit-transform: rotate(83deg);
      transform: rotate(0);
      border: 4px solid #fff;
      border-color: #fff transparent transparent #fff;
  .chat_msg_newCardInfo_top
    overflow hidden
    clear both
    height 80px
    img
      float left
      width 80px
      height 100%
      border-radius 3px
    .newCardInfo_top_right
      float right
      width 210px
      .newCardInfoSecond
        overflow hidden
        clear both
        margin-bottom 10px
      .newCardInfoTitle
        white-space nowrap
        overflow hidden
        text-overflow ellipsis
        color #000000
        font-weight 500
      .newCardInfoSubTitle
        color #878787
        white-space nowrap
        overflow hidden
        text-overflow ellipsis
      .newCardInfoSubTitleTwo
        color #878787
        display -webkit-box
        -webkit-line-clamp 1
        -webkit-box-orient vertical
        overflow hidden
        text-overflow ellipsis
      .newCardInfoAttrOne
        float right
        max-width 48px
        overflow hidden
        white-space nowrap
        text-overflow ellipsis
      .newCardInfoPrice
        color #FF6B6B
        font-weight 800
        font-size 14px
        overflow hidden
        white-space nowrap
        text-overflow ellipsis
        max-width 100px
        float left
      .newCardInfoAttrTwo
        overflow hidden
        white-space nowrap
        text-overflow ellipsis
        max-width 100px
        float right
  .newCardInfoDecs
    margin-top 10px
    p
      padding 2px 0px
      overflow hidden
      white-space nowrap
      text-overflow ellipsis
      color #595959
  .newCardInfoBtn
    clear both
    overflow hidden
    li
      float right
      padding 5px
      margin-left 5px
  .ecommerceCardInfo
    background-color #ffffff
    padding 10px
    clear both
    overflow hidden
    .ecommerceCardInfoImg
      width 56px
      height 56px
      float left
    .ecommerceCardInfoRight
      float left
      margin-left 10px
      .ecommerceCardInfoTitle
        width 208px
        float left
        color #262626
        margin-bottom 6px
        overflow hidden
        text-overflow ellipsis
        display -webkit-box
        -webkit-line-clamp 2
        -webkit-box-orient vertical
      .ecommercePrice
        color #FF5C5C
        font-size 14px
  .sessionForm
    margin-top 14px
  .msg_inner
    min-height calc(100% + 20px)
</style>
